<template>

  <div>
    <!-- 顶部面包屑 -->
    <el-row>
      <el-col :span="24">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/about/Office' }">高效办公</el-breadcrumb-item>
          <el-breadcrumb-item>会议</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 用户头像 -->
        <div class="demo-image__preview" style="margin-top:24px">
          <el-image
            style="width: 50px; height: 50px ; border-radius:25px"
            :src="url"
            :preview-src-list="srcList"
          >
            <img :src="url" alt="用户头像" />
          </el-image>
          <span>小明 | 前端工程师</span>
        </div>
        <el-divider></el-divider>
      </el-col>
    </el-row>
    <!-- 会议 -->
    <div class="px-meet">
      <div class="px-meet-item">
          <el-radio-group v-model="direction">
            <el-radio label="btt">电话会议</el-radio>
            <el-radio label="ttb">视频会议</el-radio>
          </el-radio-group>
          <el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
            新增会议
          </el-button>

          <el-drawer
            title="会议"
            :visible.sync="drawer"
            :direction="direction"
            :before-close="handleClose">
            <el-button type="primary" icon="el-icon-search">发起会议</el-button>
            <el-button type="success">加入会议<i class="el-icon-upload el-icon--right"></i></el-button>
            <el-button type="warning" icon="el-icon-star-off">预约会议</el-button>
          </el-drawer>
      </div>
       
    </div>
    
  </div>
</template>

<script>
export default {
  name: "Meets",
  data() {
    return {
      url:
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      publicPath: process.env.BASE_URL,
      srcList: [
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
        "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
        "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
      ],

       drawer: false,
        direction: 'btt',
    };
  },
   methods: {
      handleClose(done) {
        this.$confirm('确认关闭会议？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
    }
};
</script>

<style   lang="less">
.px-meet{
  width:30%;
  margin: auto;
  height:300px;
  border-radius:150px;
  box-shadow: 0 0 1px 1xp gainsboro;
  background-color: rgb(157, 207, 248);
}
.px-meet-item{
  height:50%;
  padding-top: 150px;
  text-align: center;
}
.el-drawer.btt {
    height:40%!important;
    left: 30%;
    right: 0;
    width: 40%;
    bottom:30%;
}
.el-drawer.ttb{
  height:40%!important;
    left: 30%;
    right: 0;
    width: 40%;
    top:30%;
}
.el-drawer__body > * {
    box-sizing: border-box;
    margin-top: 10%;
}
</style>